<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="item in banner"
        :key="item._id"
        @click="todetail(item._id)"
      >
        <img :src="item.coverImg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框 -->
    <router-link to="/search">
      <van-search v-model="value" placeholder="你在找什么？" shape="round" />
    </router-link>

    <!-- 图片 -->
    <router-link to="/category" class="staticimg"
      ><img
        src="https://kaola-haitao.oss.kaolacdn.com/d68e5036-44f9-4bf9-9bdd-218f89193dbdT19010111617_1920_506.jpg?x-oss-process=image/resize,w_1920,h_506/quality,q_95/format,webp"
        alt=""
    /></router-link>

    <!-- 商品列表 -->
    <h3>近期热卖</h3>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul class="prolist">
        <li
          v-for="item in productslist"
          :key="item._id"
          @click="todetail(item._id)"
        >
          <img :src="item.coverImg" alt="" />
          <b>会员价</b>
          <p class="name">{{ item.name }}</p>
          <!-- <span class="desc">{{ item.name }}</span> -->
          <span class="price1"
            >非会员价 ￥ {{ (item.price / 100 + 50).toFixed(2) }}</span
          >
          <span class="price2">￥{{ (item.price / 100).toFixed(2) }}</span>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
// 引入接口
import { getproductsAPI } from "../../api/products";
export default {
  data() {
    return {
      banner: [],
      value: "",
      productslist: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  methods: {
    // 获取轮播图
    async getbanner() {
      const res = await getproductsAPI();
      console.log(res.products);
      this.banner = res.products;
    },

    // 上拉加载
    async onLoad() {
      this.loading = true;
      const res = await getproductsAPI({ page: this.page });
      this.loading = false;
      this.productslist = [...this.productslist, ...res.products];
      console.log(res);
      if (res.products.length < 10) {
        this.finished = true;
      } else {
        this.page++;
      }
      // this.page++;
    },
    // 跳转详情
    todetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
  created() {
    this.getbanner();
    // this.getproducts(this.page);
  },
};
</script>

<style>
.home .van-swipe img {
  width: 100%;
  height: 300px;
}

.home .my-swipe .van-swipe__indicators {
  position: absolute;
  bottom: 50px;
  left: 80px;
}
.home .van-search {
  position: relative;
  top: -30px;
  z-index: 99;
  background-color: transparent;
}
.home .van-search .van-search__content {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.home .van-field__left-icon .van-icon {
  font-weight: bold;
  font-size: 20px;
}
.home .van-cell {
  line-height: 34px;
}
.home .staticimg {
  display: block;
  width: 90%;
  margin: 0 auto;
}
.home .staticimg img {
  width: 100%;
}
.home h3 {
  font-size: 24px;
  font-weight: bolder;
  line-height: 3;
  width: 90%;
  margin: 0 auto;
  color: #0077c8;
}
.home .van-list {
  margin-bottom: 50px;
}
.home .prolist {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
}
.home .prolist li {
  width: 50%;
  display: flex;
  flex-direction: column;
  line-height: 2;
}
.home .prolist img {
  width: 90%;
  font-size: 16px;
  margin: 0 auto;
}
.home .prolist b {
  font-weight: bold;

  color: #0077c8;
}
.home .prolist .name {
  font-weight: bold;
  max-height: 30px;
  overflow: hidden;
  font-size: 14px;
  max-width: 150px;
  font-size: 14px;
  color: #111;
}
.home .prolist .desc {
  color: #666;
  opacity: 0.6;
  font-size: 14px;
}
.home .prolist .price1 {
  font-size: 14px;
  color: #666;
}
.home .prolist .price2 {
  font-weight: bold;

  color: #0077c8;
}
</style>
